<%@ page language="java" pageEncoding="UTF-8"%>

	<%@include file="/views/common/include/taglib.jsp"%>
	<script src="${ctx}/js/controllers/system/menu/MenuListController.js" type="text/javascript"></script>
	<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
	</script>
<style type="text/css">
		em{
		    border-right: 1px solid #565252;
		    margin-right: 3px;
		}
	</style>
            <section id="HeadSection">
              <div style="height:40px;line-height: 40px;">
                    <div class="forword_area"></div>
					<div class="location">当前位置：${sessionScope.currcent_position}</div>
              </div>
              <hr>
              <section>
                <!--begin 搜索栏 -->
                <div  class="panel">
	                  <div  style="float:left;height: 28px;">
	                    <input id="menuName" type="text" maxlength="10" value="${(not empty menuName)? menuName : ''  }" class="input-sm" placeholder="菜单名字">
	                  	<input id="url" type="text" maxlength="20" value="${(not empty url)? url : ''  }" class="input-sm"
	                  	style=" margin-left: 8px;" placeholder="本地路径名称">
	                  	</div>
	                  	<div class="btn-group">
	                        <select id="menuLevel" class="dropdown-menu" onchange="setBgColor(this, options[selectedIndex])">
                        	<option  value="-1" <c:if test="${level == -1 }">selected="selected"</c:if>>菜单等级</option>
                            <option  value="1"  <c:if test="${level == 1 }">selected="selected"</c:if>>一级菜单</option>
                            <option  value="2"  <c:if test="${level == 2 }">selected="selected"</c:if>>二级菜单</option>
                            <option  value="3"  <c:if test="${level == 3 }">selected="selected"</c:if>>三级菜单</option>
	                        </select>
	                        
	                        <%-- </span>
	                       	<img src ="${ctx }/images/table/downAmor.png" style="float: right;margin-top: -24px;margin-right: 5px">
	                        </span> --%>
	                  	</div>
			             <div class="form-control">
			                 <div class="search" onclick="getMenuList();" ><img src="${ctx }/images/table/search_second.png"></div>
			                 <div class="search" onclick="saveOrUpdate();"><img src="${ctx }/images/table/add_second.png"></div>
			                 <%-- <div class="search" onclick="saveOrUpdate();"><img src="${ctx }/images/table/edi_second.png"></div>
			                 <div class="delete" onclick="saveOrUpdate();"><img src="${ctx }/images/table/del_second.png"></div>  --%>
			             </div>
		           </div><!--end 搜索栏 -->

                <!--begin table表格 -->
                <div>
                <table class="table">
                    <thead>
                      <tr>
                        <!-- <th width="5%"><label class="checkbox m-n i-checks"><input type="checkbox" name="allCheckBox"><i></i></label></th> -->
                        <th width="5%">序号</th>
                        <th width="15%">菜单名称</th>
                        <th width="10%">菜单级别</th>
                        <th width="15%">本地路径</th>
                        <th width="5%">顺序</th>
                        <th width="10%">操作</th>
                      </tr>
                    </thead>
                    <tbody id="tableTbody">
                      	<c:forEach items="${menuInfo.list }" var="menuVo" varStatus="menuStatus">
	                      <tr onmouseover="mouseoverOne(this)" onmouseout="mouseoutOne(this)">
	                        <!-- <td><label class="checkbox"><input type="checkbox" name="post[]"><i></i></label></td> -->
	                        <td>${menuStatus.index + 1 }</td>
	                        <td>${menuVo.menuName}</td>
	                        <td>${menuVo.menuLevel==1 ? '一级菜单' : (menuVo.menuLevel==2 ? '二级菜单' : '三级菜单')}</td>
	                        <td>${menuVo.locationURL}</td>
	                        <td>${menuVo.menuOrder}</td>
	                        <td >
	                          <a class="fa fa-check " onclick="saveOrUpdate('${menuVo.id}','${menuVo.state }');">编辑&nbsp;&nbsp;|</a>
	                          <c:if test="${menuVo.state==1}">
	                          <a class="fa fa-check " onclick="toggleState('${menuVo.id}','${menuVo.state }');">停用</a>
	                          </c:if>
	                          <c:if test="${menuVo.state==2}">
	                          <a class="fa fa-times text-danger text" onclick="toggleState('${menuVo.id}','${menuVo.state }');">启用</a>
	                          </c:if>
	                        </td>
	                      </tr>
                      	</c:forEach>
                    </tbody>               
                                      
                    <tfoot>
		            	<tr>
			               <td colspan="6">
			                  <div>
			                    <div style="float:left;">
			                      <span class="total">合计 ${menuInfo.total} 条数据</span>               
			                    </div>
			                    <div style="float:right;  margin-right: 10px;margin-top: 29px">   
			                      <div style="float:left;">                
				                      <ul class="footer_ul">
					                      	<c:if test="${menuInfo.hasPreviousPage }">
					                        <li onclick="gotoPage(${currentPage-1 });"><a class="leftRight">&lt;&lt;</a></li>
					                      	</c:if>
											<c:if test="${menuInfo.firstPage > 1}">
												<li onclick="gotoPage(1);"
													style="border: 1px solid #9A9A9A;"><a>1</a></li>
												<c:if test="${menuInfo.firstPage > 2}">
				                        		...
				                        	</c:if>
											</c:if>
											<c:forEach items="${menuInfo.navigatepageNums }" var="page">
												<li onclick="gotoPage(${page });"
													class="<c:if test="${currentPage == page }">active</c:if>"
													style="border: 1px solid #9A9A9A;"><a>${page}</a></li>
											</c:forEach>
											<c:if test="${menuInfo.lastPage < menuInfo.pages}">
												<c:if test="${menuInfo.firstPage < menuInfo.pages - 1}">
				                        		...
				                        	</c:if>
												<li onclick="gotoPage(${menuInfo.pages});"
													style="border: 1px solid #9A9A9A;"><a>${menuInfo.pages}</a>
												</li>
											</c:if>
											<c:if test="${menuInfo.hasNextPage }">
					                        <li><a onclick="gotoPage(${currentPage+1});" class="leftRight">&gt;&gt;</a></li>
					                      	</c:if>
				                      	</ul>
			                   		</div>
			                   	    <div style="float:left;  height: 30px;margin-top:2px;">
										<span style="color: #9A9A9A;">跳转到</span> 
										<input class="inputclass" id="pageNo" onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}" type="text" value="${currentPage }"
										style="width:26px;height:28px"onkeyup = "checInputNum(this)">
										<span style="color: #9A9A9A;">页</span> 
										<span class="buttonclass" id="J_JumpTo" onclick="gotoMenuPage(null);"><a>GO</a></span>
									 </div>
			                 </div>
			                 </div>
						</td>
					</tr>
				</tfoot>
                </table>
                </div>
              </section>
            </section>
   <%@include file="/views/common/footer.jsp"%>
<script type="text/javascript">
//鼠标滑入滑出更改增删改图片
$("img[src*=view]").hover(function(){
	$(this).attr("src","${ctx}/images/tables/view_red.png");
	},function(){
		$(this).attr("src","${ctx}/images/tables/view_green.png");
	});
$("img[src*=edit]").hover(function(){
	$(this).attr("src","${ctx}/images/tables/edit_red.png");
	},function(){
		$(this).attr("src","${ctx}/images/tables/edit_green.png");
	});
$("img[src*=no]").hover(function(){
	$(this).attr("src","${ctx}/images/tables/no_user_red.png");
	},function(){
		$(this).attr("src","${ctx}/images/tables/no_user_green.png");
	});
$("img[src*=yes]").hover(function(){
	$(this).attr("src","${ctx}/images/tables/yes_user_red.png");
	},function(){
		$(this).attr("src","${ctx}/images/tables/yes_user_green.png");
	});

$("select>option").mouseover(function(){
	$(this).css("background-color","red");
	
})
</script>
<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
